<template>
  <div class="body-color">
    <Header></Header>
    <Banner style="height:200px"></Banner>

    <div class="container-fluid">
      <div class="body-head">
        <h4 style="color:rgb(0, 0, 0)">Blocks</h4>
        <hr>
        <h6 style="color:rgb(0, 0, 0)">Sponsored: Green Bitcoin: Traders Buy This Predict to Earn Coin Before BTC Halving! Buy $GBTC Now. </h6>
      </div>

      <!-- 头部四个盒子 -->
      <div class="body-four-box">

        <div>
          <span>Network Utilization (24H)</span>
          <h4>{{chainData.networkUtilzation}}%</h4>
        </div>
        <div><span>Last Safe Block</span>
          <h4>{{chainData.lastSafeBlock}}</h4>
        </div>
        <div><span>Hourly transactions (24H)</span>
          <h4>{{chainData.transactionNum}}</h4>
        </div>
        <div><span>Total transaction</span>
          <h4>{{chainData.totalTransactionNum}}</h4>
        </div>
      </div>


      <!-- 列表 -->
      <div class="body">
        <div class="tb-header">
          <div>
            <div>More than {{pageCount}} transactions found</div>
            <span class="no-flex">（Showing the last {{pageSize}} article）</span>
          </div>
          <div class="page-box" style="cursor: pointer;">
                     <span class="page-button" @click="first()">First</span>
                    <span class="page-button" @click="jian()">&lt;</span>
                    <span class="page-button">Page {{startPage}} of {{Math.ceil(pageCount/this.pageSize)}}</span>
                    <span class="page-button " @click="isButtonDisabled()"  :style="{ 'pointer-events': last ? 'none' : 'auto' }" >&gt;</span>
                    <span class="page-button " @click="lasts()" :style="{ 'pointer-events': last ? 'none' : 'auto' }">Last</span> 
                </div>
        </div>

        <div class="tb-body">
          <table class="table">
            <tr>
              <th class="th-one">Block</th>
              <th class="age th-age">Age</th>
              <th class="txn">Txn</th>
              <th>Fee Recipient</th>
              <th class="used">Gas Used</th>
              <th class="limit">Gas Limit</th>
              <th class="base-fee">Base Fee</th>
              <th>Reward</th>
              <th class="burnt-fees">Burnt Fees (ROCKET)</th>
            </tr>
            <tr v-for="(item,index) in blockArray" :key="index+1" class="tr-color">
              <td class="td-one" @click="goToBlockInfo(item)">{{item.number}}</td>
              <td class="age">{{getTimeDifference(item.timestamp)}}</td>
              <td class="txn tb-txn">{{item.transactions}}</td>
              <td class="recipient">{{formatString(item.miner)}}</td>
              <td class="used">{{item.gasUsed}}</td>
              <td class="limit">{{item.gasLimit}}</td>
              <td class="base-fee">{{item.baseFeePerGas}} Gwei</td>
              <td class="totalReward">{{trimZero(item.totalReward)}} ROCKET</td>
              <td class="burnt-fees">{{item.totalBurntFees}} ROCKET</td>
            </tr>
          </table>
        </div>
      </div>

    </div>


    <Footer></Footer>
  </div>
</template>

<script>
import '@/assets/css/Block.css'
import {getBrowserBlock,getBrowserChainData} from '@/api/home.js';
export default {
  name: 'Block',
  data(){
    return {
      blockArray:[],
       pageCount:"",
       startPage:1,
       last:false,
       firsts:false,
       pageSize:30,
       chainData:{}
    }
  },
  
  methods:{

    goToBlockInfo(time){
    this.$router.push({name:'blockInfo',params:{blockId:0,inputValue:time.number}})
  },


    formatString(str) {
      if (str.length <= 20) {
        return str;
      } else {
        return `${str.substr(0, 8)}....${str.substr(-8)}`;
      }
    },

    trimZero(value) {
    return parseFloat(value.toString());
  },


   

    isButtonDisabled(){
       if(this.startPage<Math.ceil(this.pageCount/this.pageSize)){
        this.startPage++;
          this.onLoadBlock();
            }else{
             this.last=false;
             this.firsts=true;
         }
   },
    lasts(){
    if(this.startPage<Math.ceil(this.pageCount/this.pageSize)){
        this.startPage=Math.ceil(this.pageCount/this.pageSize)
          this.onLoadBlock();
          this.last=false;
            }else{
             this.firsts=true;
         }
   },
    jian(){
     if(this.startPage>1){
        this.startPage--;
          this.onLoadBlock();
            }else{
            this.last=false;
            this.firsts=true;
         }
    },

    first(){
    if(this.startPage>1){
         this.startPage=1
         this.onLoadBlock();
    }else{
       this.firsts=false;
       this.last=true;
    }
   },




     getTimeDifference(time){
       var times= this.differenceInSeconds(time);//秒
       if(times>60){
        times= (times / 60).toFixed(0); //分
        if(times>60){
        times= (times / 60).toFixed(0); // 根据需要调整小数位数
        if(times>24){
         return times= (times / 24).toFixed(0)+" day ago";
        }else{
            return times+" hour ago";
        }
        }else{
            return times+" minute ago"; //分
        }
       }else{
        return times+" secs ago"; //秒
       }
    },
    
     differenceInSeconds(time) {
      const start = time;
      const end = Math.floor(Date.now() / 1000);
      const difference = (end - start); 
      return difference;
    },

     async onLoadBlock(){
      const res=await getBrowserBlock({
        cursor:(this.startPage-1)*this.pageSize,
        ps:this.pageSize
       })
       this.pageCount=res.data.count
     this.blockArray=res.data.blockInfo
   },
   async onLoadBrowserChainData(){
      const res=await getBrowserChainData({
       })
     this.chainData=res.data
   },
  },


  created(){
    this.onLoadBrowserChainData();
      this.onLoadBlock();
  }


  
}
</script>

<style>
.body-color{
  background-color: rgb(0, 0, 0);
}
</style>